<template>
  <div class="w-full h-full bg-FilePage">
    <WindowTab obj="file">
      <p class="flex flex-row items-center gap-1">
        <i class="iconfont icon-wenjianjia text-orange-300" style="font-size: 18px"></i>
        <span class="text-fontRegular">我的文件</span>
      </p>
    </WindowTab>
    <!-- 头部 -->
    <div class="pb-2" style="border-bottom: 1px solid var(--border)">
      <div class="text-center">
        <el-input v-model="searchFile" class="text-12px h-[30px]" placeholder="搜索" style="width: 380px">
          <template #prefix>
            <component :is="RenderIcon(SearchOutline)" />
          </template>
        </el-input>
      </div>
    </div>
    <div class="w-full h-full grid grid-cols-[150px,1fr] overflow-y-scroll">
      <!-- 导航栏 -->
      <div class="text-center cursor-pointer p-2">
        <FileListNav v-model:selectedPage="selectedPage" />
      </div>
      <!-- 内容区域 -->
      <component :is="RenderPage"></component>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { FilePage } from "@/types/file.ts";
import { RenderIcon } from "@/utils/common.ts";
import OwnFileList from "./views/ownFileList.vue";
import FriendFileList from "./views/friendFileList.vue";
import GroupFileList from "./views/groupFileList.vue";
import WindowTab from "@/components/WindowTab/index.vue";
import FileListNav from "./components/FileListNav.vue";
import { SearchOutline } from "@vicons/ionicons5";

let searchFile = ref<string>("");
let selectedPage = ref<FilePage>(FilePage.owner);

const RenderPage = computed(() => {
  switch (selectedPage.value) {
    case FilePage.owner:
      return OwnFileList;
    case FilePage.session:
      return FriendFileList;
    case FilePage.group:
      return GroupFileList;
  }
});
</script>

<style lang="scss" scoped></style>
